<template>
  <transition>
    <div class="app-brand-list">
      <mt-index-list>
        <mt-index-section v-for="(list,listIndex) in carList" :index="list.firstLetter">
          <mt-cell v-for="(item,index) in list.brandList" :title="item.name" :class="{active:curIndex[listIndex]==index}" @click.native="handleFilter(index,listIndex,item)">
            <dl class="factory-list" v-for="f in item.factoryList">
              <dt class="factory-header">{{f.name}}</dt>
              <dd class="factory-item" v-for="chexi in f.seriesList" @click="handleOpen(chexi)">{{chexi.name}}</dd>
            </dl>
          </mt-cell>
        </mt-index-section>
      </mt-index-list>

      <div class="popup-chexing" :class="{active:popupResult==true}">
        <dl class="model-list">
          <dt class="model-header">{{carXiName}}<span class="iconfont icon-close2" @click="handleClosePopup"></span></dt>
          <dd class="model-item" v-for="item in carModelList" @click="handlSelect(item)">{{item.name}}</dd>
        </dl>
      </div>
    </div>
  </transition>
</template>

<script>
  import { Header,Cell,IndexList, IndexSection,Indicator} from 'mint-ui';

  //  Vue.component(Header.name, Header);
  export default {
    data () {
      return {
        currentActive: -1,
        popupResult:false,
        curIndex: [],
        carList: [],
        carModelList:[],
        carBrandName:'',
        carFactoryName:'',
        carXiName:'',
      }
    },
    mounted: function () {
//      Indicator.open({
//        text: '加载中...',
//        spinnerType: 'snake'
//      });
      this.getData();
    },
    methods: {

      /** 获取车型列表 **/
      getData() {

        this.$axios({
          method: 'post',
          url:'gp/declaration/getCarList',
        }).then((res)=>{
          if(res.data.statusCode==200){
//          Indicator.close();
          console.log(res.data.object)
          this.carList=res.data.object;
          for (var i = 0; i < this.carList.length; i++) {
            //放入数组
            this.curIndex.push(-1);
          }
        }
      })
      },

      handleOpen(item){
        this.carModelList=[];
        this.popupResult=true;
        console.log(item)
        this.carXiName=item.name;
        var params = new URLSearchParams();
        params.append('seriesId', item.id);
        this.$axios({
          method: 'post',
          url:'gp/declaration/getModelList',
          data:params,
        }).then((res)=>{
          if(res.data.statusCode==200){
          this.carModelList=res.data.object;
        }
      })
      },
      handlSelect(item){
        const carModel=this.carBrandName+'>'+this.carXiName+'>'+item.name
        this.popupResult=false;
        this.$emit('brandData',carModel)
//        this.$router.push({path:'/report-center',query: {carModel:carModel}})

      },
      handleClosePopup(){
        this.popupResult=false;
      },
      handleFilter: function (index, listIndex, item) {
        this.carBrandName=item.name;
        this.curIndex=[];
        for (var i = 0; i < this.carList.length; i++) {
          //放入数组
          this.curIndex.push(-1);
        }
        this.curIndex.splice(listIndex, 1, index);
      },
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style>

  .app-brand-list .popup-chexing{
    background: #fff;
    position: absolute;
    top:0;
    right: 0;
    left: 0;
    bottom:0;
    overflow: auto;
    transition:.3s;
    transform: translate(100%,0);
  }
  .app-brand-list .model-list{
    position: absolute;
    top:0;
    right: 0;
    left: 0;
    bottom:0;
    padding:50px 0 0;
    overflow: auto;
  }
  .app-brand-list .popup-chexing.active{
    transform: translate(0,0);
  }
  .app-brand-list .popup-chexing .model-header{
    position: fixed;
    top:0;
    left: 0;
    right: 0;
    z-index:1000;
    padding:14px 16px 14px 8px;
  }
  .app-brand-list .popup-chexing .model-header .icon-close2{
    float: right;
  }
  .app-brand-list{
    position: relative;
    overflow: hidden;
  }
  .app-brand-list .mint-indexlist-nav{
    width: 40px;
  }
  .app-brand-list .mint-indexlist-navitem{
    padding:3px 6px;
    font-size: 14px;
  }
  .app-brand-list .mint-cell{
    display: block;
    padding:16px 0;
    min-height:inherit;
    border-bottom:1px solid #eee;
  }

  .app-brand-list .mint-cell.active .factory-list{
    display: block;
  }
  .app-brand-list .mint-cell-wrapper{
    background:none;
    display: block;
    padding-right:0;
  }
  .mint-cell-value{
    display: block;
  }
  .factory-list{
    display: none;
    margin: 0;
    padding:16px 0 0;
    font-size: 14px;
  }
  .factory-header,.model-header{
    background:#f5ebeb;
    padding:14px 4px;
    color:#c34853
  }
  .factory-item,.model-item{
    position: relative;
    margin:0px;
    padding:14px 26px 14px 12px;
    border-bottom:1px solid #eee;
  }
  .factory-item:after,.model-item:after{
    border: 2px solid #c8c8cd;
    border-bottom-width: 0;
    border-left-width: 0;
    content: " ";
    top: 50%;
    right: 20px;
    position: absolute;
    width: 5px;
    height: 5px;
    -webkit-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
  }
  .factory-item:last-child{
    border-bottom:none;
  }
  .model-list{
    margin: 0;
    padding:16px 0 0;
    font-size: 14px;
  }
</style>
